<!-- APPvvue] -->
<template>
    <div class="app">
    <p>我是父组件</p>
    {{ name }} {{ model }} {{ price }} {{ color }}
    <Son></Son>
    <child :val=car @handleone="handleone" @handletwo="handletwo"></child>
    </div>
  
  </template>
  <script setup>
  import Son from "@/components/son.vue"
  import child from "./components/child.vue";
  const car = reactive({
    name:'宝马',
    model:'328',
    price:30,
    color:'白色'
  })
  //通过props传递数据，一般是父传子,直接在子组件中绑定数据即可。  <child :val=car></child>
   const handleone=(e)=>{
    console.log(`output->handleone触发了`,e)
    car.name=e
   }
   const handletwo=(e)=>{
     car.color=e
    console.log(`output->handlwo触发了`,e)
   }
  
  const {name, model, price, color} = toRefs(car)
  //provide注入数据 一般是父传孙
  provide('car', car)
  </script>
  
  <style lang="less" scoped>
  
    .app {
      width: 1000px;
      height: 800px;
      border: 1px dashed black;
      margin: 0 auto;
      padding: 0;
    }
  </style>
<!-- APPvvue] -->

<!-- childvue[-->
<template>
    <div>
      我是child组件
      {{ data }}
      <button type="button" @click="changecarname">修改车辆数据</button>
      <button type="button" @click="changecarcolor">修改车辆数据</button>
    </div>
  </template>
  
  <script setup name="child">
  const data = defineProps(["val", "msg"]);//此处接受数据
  const emits = defineEmits(["handleone", "handletwo"]); // 定义一个或多个自定义事件
  const changecarname = () => {
    console.log(`output->11`, 11);
     let name='特能拉'
    emits("handleone",name);
  };
  const changecarcolor = () => {
    console.log(`output->22`, 22);
    let tempColor='黄色'
    //提交事件
    //第一个参数是事件名，第二个参数是具体的数据
    emits("handletwo", tempColor);
  };
  console.log("[ childdata ] >", data);
  </script>
  
  <style lang="less" scoped></style>
  
<!-- childvue] -->